<template>
  <div class="PreOrder">
    <h1>确认订单</h1>
    <el-table
    :data="currentProduct"
    style="width: 100%">
    <el-table-column align="center"
      label="充值产品">
      <template v-slot="{row}">
          <img style="vertical-align: middle"
          width="40%"
          :src="row.imageUrl"
          alt=""/>
          &nbsp;
          <span style="color:#f4c14f;font-weight: bolder">{{row.productName}}</span>
          <br/>
          <span>{{row.description}}</span>
        </template>
    </el-table-column>
    <el-table-column
    align="center"
      label="单价"
      width="180">
      <template v-slot="{row}">
        <span class="price">
          {{row.price}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="address"
      label="数量">
      <!-- 必须要加v-slot=不然计数器没办法用  -->
      <template v-slot="{row}">
        <el-input-number v-model="quantity"
          size="mini"
          :min="1"
          :max="1000"
          label="描述文字"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="address"
      label="小计">
      <template>
        <span>{{total_fee}}</span>
      </template>
    </el-table-column>
  </el-table>
    <div class="total-fee">
        <div class="box">
          <div class="shadow">
            <span class="realpay">实付款:</span>
            <span>￥</span>
            <span></span>
            <div>
              <div>
                <span>充值详情:</span>
                <span>尊贵的VIP3充值服务,充值成功将拥有成为刘昊然老婆的机会。
                  机不可失时不再来赶紧抢购吧！</span>
              </div>
              <div>
                <span>
                  充值账号
                </span>
                <span>13721201803</span>
              </div>
            </div>
          </div>
          </div>
        <div class="button">
            <el-button @click="commitOrder" type="danger">提交订单</el-button>
          </div>
    </div>
  </div>
</template>
<style scoped>
  .total-fee{
    margin-top: 50px;
    /* text-align: right; */
  }
.box{
  border: 1px solid pink;
  display: inline-block;
  text-align: right;
}
.shadow{
  border: 3px solid #fff0e8;
  padding: 10px 5px 10px 20px
}
button{
  width: 180px;
    border-radius: 0;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
}
.realpay{
  font-weight: 700;
    color: #333;
}
</style>
<script>
  import * as api from "@/api/pay"
  export default{
    computed: {
		total_fee() {
			return (this.quantity * this.currentProduct[0]?.price).toFixed(2)
		}
	},
    data(){
      return{
        product_id:"",
        currentProduct:[],
        quantity: 1,
      }
    },
    created(){
      let{product_id}=this.$route.query
      this.product_id=product_id
      api.getProductDetailApi(product_id)
      .then(res=>{
        console.log(res)
        this.currentProduct=res.data.data
      })
    },
    methods:{
      commitOrder() {
			//提交订单方法
			this.$confirm('您是否确认购买' + this.currentProduct[0].productName + ',商品总价格为:' + this.total_fee, '确认订单', {
				confirmButtonText: '确定下单',
				cancelButtonText: '取消',
				type: "info"
			})
				.then(() => {
					//调用下单接口
					api.preOrderApi(this.product_id, this.quantity)
						.then(res => {
							console.log(res)
							if(res.data.state){
                let {order_id}=res.data
                this.$router.push({name:"home-payment-pay",query:{order_id}})
              }
						})
				})
				.catch(() => {
					this.$message.error('已取消下单')
				})
		},
    }
  }
</script>